<template>
  <div id="user-login">
    <user-head class="user-head">
      <span slot="user-head-center" class="login-head-center">AI FORCE</span>
    </user-head>
<user class="login-box">
  <div slot="user-content">
    <Input placeholder="请输入十一位手机号" v-model.lazy.trim="phone"></Input>
    <user-password ref="regpsw"/>
    </div>
    <div slot="user-commit" class="login-btn"><Button type="success" long @click="login">登录</Button></div>
    <div slot="user-cut" class="login-user-cut"><span @click="toRegister()"> 注册 </span>|<span @click="toHome"> 返回首页 </span></div>
</user>
  </div>
</template>
<script>
import User from '../../../common/user/User.vue'
import UserHead from 'components/common/user/UserHead.vue'
import UserPassword from '../../../common/user/UserPassword.vue'
import {commitLogindata} from 'api/login.js'
export default {
  name:'UserLogin',
  data(){
    return {
      phone:'',
      password:''
    }
  },
  components:{
    User,
    UserHead,
    UserPassword
  },
  methods:{
    toRegister(){
      this.$router.push('/register');
    },
    toHome(){
      this.$router.push('/homepage');
    },
    login(){
      let testpsw=/^[\u4e00-\u9fa50-9A-Za-z]{6,20}$/;
      let testphone=/^\d{11}$/;
      this.password=this.$refs.regpsw.password;
      if(!testphone.test(this.phone))
      {
        if(this.phone){
          this.$Notice.warning({
          title:'电话号码格式错误',
          duration:5})
        }else{
          this.$Notice.warning({
          title:'电话号码不能为空',
          duration:5})
        }
      }else if(!testpsw.test(this.$refs.regpsw.password))
      {
        if(this.password){
        this.$Notice.warning({
          title:'密码格式错误',
          duration:5})
        }else{
          this.$Notice.warning({
          title:'密码不能为空',
          duration:5})
        }
      }
      else{
        let formdata=new FormData();
        formdata.append('phone',String(this.phone));
        formdata.append('password',String(this.password));
        commitLogindata('api/user/login',formdata)
        .then(res => {
            if(res.success='success'){
            sessionStorage.id = res.data.id;
            sessionStorage.phone = res.data.phone;
            sessionStorage.username = res.data.username;
            sessionStorage.portrait=res.data.portrait;
            sessionStorage.mytoken = res.data.token;
            this.$Notice.success({
             title:'登录成功',
             duration:5})
             this.$router.push('/homepage');
            }
        })
        .catch(err => {
        this.$Notice.error({
          title:'电话号码或密码错误',
          duration:5})
        });
      }
    }
  }
}
</script>
<style>
#user-login{
  width: 100%;
  height: 100vh;
  background-color: rgb(140, 48, 245);
  overflow: hidden;
}
.user-head{
  position: relative;
  top: 10.5rem;
  left: 38rem;
}
.login-box{
  margin-left: 32%;
  margin-top: 8%;
}
.ivu-input{
  font-size: 14px;
  padding: 4px 7px;
  height: 40px;
  margin-bottom: 1.4375rem;
}
.ivu-input:hover,
.ivu-input:active,
.ivu-input:focus{
  border-color: rgb(140, 48, 245);
}
.ivu-btn-success{
  font-size: 18px;
  background-color: rgb(140, 48, 245);
  border-color: rgb(140, 48, 245);
}
.ivu-btn-success:hover{
  background-color: rgb(140, 48, 245);
  border-color: rgb(140, 48, 245);
}
.ivu-btn-long{
  width: 88%;
}
.login-btn{
  cursor: pointer;
  width: 96%;
  color: #969BAB;
}

.login-user-cut{
  cursor: pointer;
  position: relative;
  right: -80%;
  bottom: 0.5rem;
  font-size: 14px;
  color: #969BAB;
}
.login-head-center{
  position: absolute;
  top: 35%;
  left: 30%;
}
</style>